<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="600"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <el-row>
                <el-col :span="24">
                    <el-form-item
                        label-width="120px"
                        label="采购订单编号:"
                    >{{entityObj.purchaseOrderCode}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="供应商:">
                        <el-tooltip placement="top">
                            <template #content>
                                联系人: {{entityObj.supplierRealName}}
                                <br />
                                联系电话:{{entityObj.supplierMobile}}
                                <br />
                                收货地址:{{entityObj.supplierAddress}}
                            </template>
                            <span style="color: blue;">{{entityObj.supplierName}}</span>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="收货人:">{{entityObj.realName}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="收货地址:">{{entityObj.address}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table :data="entityObj.purchaseDeliveryFeeItems" >
                        <el-table-column label="配送费" width="180">
                            <template #default="scope">
                                <el-input-number
                                    placeholder="---请输入配送费---"
                                    v-model="scope.row.deliveryFee"
                                    style="width: 100%;"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" width="230">
                            <template #default="scope">
                                <el-input
                                    placeholder="---请输入备注---"
                                    v-model="scope.row.remarks"
                                    style="width: 100%;"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="80">      
                            <template #default="scope">
                                <el-button
                                    type="primary"
                                    icon="Plus"
                                    round
                                    v-if="scope.$index==entityObj.purchaseDeliveryFeeItems.length-1"
                                    @click="addRow()"
                                    style="width: 25px;height: 25px;"
                                ></el-button>
                                <el-button
                                    type="danger"
                                    icon="Close"
                                    round
                                    v-if="scope.$index>0"
                                    @click="delRow(index, scope.row)"
                                    style="width: 25px;height: 25px;"
                                ></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="this.visible = false">取 消</el-button>
            <el-button
                v-if="mode != 'show'"
                type="primary"
                :loading="isSaveing"
                @click="submit()"
            >保 存</el-button>
        </template>
    </full-screen-dialog>
</template>

<script>
import tool from "@/utils/tool";
export default {
    data() {
        return {
            visible: false,
            orgType: 3,
            mode: "Add",
            titleMap: {
                Add: "新增",
                Edit: "编辑",
                Show: "查看",
            },
            entityObj: {},
        };
    },
    computed: {},
    methods: {
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表单提交方法
        submit() {
            if(this.entityObj.status<=2)
            {
                this.$message.error("订单还未接单，无法填写！");
                return false;
            }
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    try {
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                "purchase-order/delivery-fee",
                                { ...this.entityObj }
                            );
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$emit("fatherMethod");
                            this.isSaveing = false;
                            this.entityObj = {};
                            this.visible = false;
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                            this.isSaveing = false;
                        }
                    } catch (error) {
                        this.loading = false;
                        this.isSaveing = false;
                        return false;
                    }
                }
            });
        },
        //表单注入数据
        async setData(data) {
            this.entityObj = {};
            try {
                var returnValue = await this.$API.auth.GetProcessApi.get(
                    `purchase-order/${data.purchaseOrderId}`,
                    {}
                );
                if (returnValue.status == 200) {
                    this.entityObj = { ...returnValue.response };
                    if (!this.entityObj.purchaseDeliveryFeeItems||this.entityObj.purchaseDeliveryFeeItems.length==0) { 
                        this.entityObj.purchaseDeliveryFeeItems = [{
                            deliveryFee: 0,
                            remarks: "",
                        }];
                    }
                    console.log("setData",this.entityObj)
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                return false;
            }
        },
        addRow() {
            if (!this.entityObj.purchaseDeliveryFeeItems) {
                this.entityObj.purchaseDeliveryFeeItems = [];
            }
            this.entityObj.purchaseDeliveryFeeItems.push({
                deliveryFee: 0,
                remarks: "",
            });
        },
        delRow(index) {
            this.entityObj.purchaseDeliveryFeeItems.splice(index, 1);
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
    },
};
</script>

<style scoped>
.el-form-item {
    margin-bottom: 8px !important;
}
.el-table .selected-row-color-grey {
    color: #000000 !important;
    text-decoration: line-through; /* 删除线 */
}
</style>
